<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问CSS</title>
    <script>
        function f1(){
            let s = setInterval(function(){
                let image = document.getElementById("image");
                image.style.left = parseInt(image.style.left)+50+"px";
            },100);
            setTimeout(function(){
              clearInterval(s);
            },2000);
        }
        function f2(){
            let s = setInterval(function(){
                let d2 = document.getElementById("d2");
                d2.style.width = parseInt(d2.style.width)+2+"%";
            },100);
            setTimeout(function(){
                clearInterval(s);
            },5000);
        }
    </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" alt="图片加载失败" style="position: relative;left: 0px;"onclick="f1()"/>
<div id="d1" style="width: 1000px;height: 30px;border: 1px solid black;">
    <div id="d2" style="height: 100%;background: red;width: 2%;"></div>
</div>
<button onclick="f2()">加载</button>
</body>
</html>